<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1440, minimum-scale=0.1, maximum-scale=10, user-scalable=no" />
    <meta name="color-scheme" content="light" />
    <meta name="full-screen" content="yes" />
    <link rel="icon" href="favicon.ico" />
    <title>中数智算</title>
  </head>
  <body>
    <script src="./lib/qrcode.min.js"></script>
    <script src="./lib/vue.global.min.js"></script>
    <link rel="stylesheet" href="./lib/element-plus/index.css" />
    <script src="./lib/element-plus/index.full.min.js"></script>
    <script src="./lib/element-plus/locale/zh-cn.js"></script>
    <script src="./lib/Application.umd.js"></script>
    <script src="./lib/apiDoc.js"></script>

    <!-- 人员添加组件 -->
    <template id="DesignWorker">
      <div class="worker-add-view flex-column" v-loading="loading">
        <div class="flex-row-between">
          <div class="width-50 flex-column">
            选择
            <div class="card el-card is-never-shadow flex-column">
              <el-input placeholder="搜索员工" v-model="filterText" @change="filterTree" clearable>
                <template #prefix>
                  <Icon icon="search" @click="filterTree(filterText)"></Icon>
                </template>
              </el-input>
              <div style="margin: 5px 0">
                <el-button-group>
                  <el-button :type="!qr?'primary':null" @click="qr = false">组织架构</el-button>
                  <el-button :type="qr?'primary':null" @click="qr = true">二维码邀请</el-button>
                </el-button-group>
              </div>
              <div v-show="qr" class="text-center">
                <div class="qr">
                  <!-- <div class="qr-code" title="1">
                    <img :src="imgUrl" style="display: block" :title="imgUrl" />
                  </div> -->
                  <!-- {{design}} -->
                  <Qr-Code :text="imgUrl"></Qr-Code>
                  <div class="text text-large">扫码加入</div>
                  <div class="text text-large" v-if="design.companyName">{{design.companyName}}</div>
                  <div class="text" v-if="design.name">{{design.name}}</div>
                  <div class="text" v-if="design.dep_name">{{design.dep_name}}</div>
                  <div class="text" v-if="design.pro_name">{{design.pro_name}}</div>
                </div>
                <div><el-button type="primary" @click="download()">下载二维码</el-button></div>
              </div>
              <div v-show="!qr" class="user-list-box flex-column`">
                <el-tree
                  :data="data"
                  node-key="vid"
                  :props="props"
                  :default-expand-all="false"
                  :default-expanded-keys="expandedKeys"
                  :expand-on-click-node="true"
                  :highlight-current="true"
                  :filter-node-method="filterNode"
                  @node-expand="nodeExpand"
                  ref="tree"
                >
                  <template #default="{ node, data }">
                    <div style="flex-grow: 1" class="tree-node flex-row-between flex-row-center" :class="getTreeNodeClass(data)">
                      <span>
                        <Icon v-if="data.type!='user'" :icon="getIcon(data.type)" class="info"></Icon>
                        <div v-else class="user-list-item-head">{{ (data.userName||"").substring(0,2) }}</div>
                        <span class="text-nowrap">{{ data.name}}</span>
                      </span>
                      <span v-if="data.type!='user'" class="info">
                        <Icon icon="struct"></Icon>
                        下级
                      </span>
                      <el-text v-else type="primary" class="click" @click.stop="addUser(data)">添加</el-text>
                    </div>
                  </template>
                </el-tree>
                <!-- <div class="user-list flex-column">

                  <div class="user-list-item flex-row-center flex-row-between" v-for="item in userList" :key="item.userId">
                    <div class="user-list-item-head">{{ (item.userName||"").substring(0,2) }}</div>
                    <div class="user-list-item-name text-nowrap">{{item.userName}}</div>
                    <el-text type="primary" class="click" @click="addUser(item)">添加</el-text>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
          <div class="width-50 flex-column">
            已选
            <div class="card el-card is-never-shadow user-list-box">
              <!-- {{userListSelected}} -->
              <div class="user-list flex-column">
                <!-- {{userList}} -->
                <div class="user-list-item flex-row-center flex-row-between" v-for="item in userListSelected" :key="item.userId">
                  <div class="user-list-item-head">{{ (item.name||"").substring(0,2) }}</div>
                  <div class="user-list-item-name text-nowrap">{{item.name}}</div>
                  <el-text type="primary" class="click" @click="removeUser(item)">取消</el-text>
                </div>
                <div class="user-list-item flex-row-center flex-row-between" v-for="item in design.userList" :key="item.userId">
                  <div class="user-list-item-head">{{ (item.name||"").substring(0,2) }}</div>
                  <div class="user-list-item-name text-nowrap">{{item.name}}</div>
                  <el-text type="primary" class="click" @click1="removeUser(item)">已有成员</el-text>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="dialog-action text-right">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save">确认</el-button>
        </div>
      </div>
    </template>
    <script>
      var DesignWorker = {
        extends: BaseComponent,
        template: "#DesignWorker",
        name: "DesignWorker",
        props: ["design", "active"],
        emits: ["close"],
        data() {
          return {
            qr: false,
            props: {
              label: "name",
              children: "children"
            },
            filterText: null,
            loading: false,
            result: null,
            nodeActive: null
          };
        },
        computed: {
          expandedKeys() {
            let vid = ((this.nodeActive || {}).data || {}).vid;
            return vid && [vid];
          },

          imgUrl() {
            let typeMap = { 公司: "1", 部门: "2", 项目: "3" };
            let active = this.active || {};
            let type = typeMap[active.type] || active.type;
            let id = null;
            switch (type) {
              case "1":
                id = active.sc_id;
                break;
              case "2":
              case 2:
                id = active.dep_id;
                break;
              case "3":
                id = active.pro_id;
            }
            let wbt_id = this.design.wbt_id || "";
            console.debug("[imgUrl]", this.design, active);
            return `${window.loginUrl}?type=${type}&id=${id}&&wbt_id=${wbt_id}`;
          },

          userListSelected() {
            this.design.userListAdd = Array.isArray(this.design.userListAdd) ? this.design.userListAdd : [];
            return this.design.userListAdd;
          },
          data() {
            return (this.result || {}).data;
          },
          checkAll() {
            return 0;
          }
        },
        created() {
          this.getOrgNodesAndUsers();
        },
        watch: {
          filterText(fresh, old) {
            this.filterTree(fresh);
          },
          treeKey() {
            this.$nextTick(() => this.filterTree(this.filterText));
          }
        },
        methods: {
          download() {
            function dataURLtoBlob(dataurl) {
              var arr = dataurl.split(","),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
              while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
              }
              return new Blob([u8arr], { type: mime });
            }
            let name = (this.active || {}).name;
            const blob = dataURLtoBlob(document.querySelector(".qr-code img").src);
            let a = document.createElement("a");
            a.setAttribute("download", name ? "二维码邀请-" + name + ".jpg" : "二维码邀请.jpg");
            a.setAttribute("href", URL.createObjectURL(blob));
            a.click();
          },
          nodeExpand(data, node, vm) {
            console.debug(data, node, vm);
          },
          filterTree(val) {
            this.$refs.tree && this.$refs.tree.filter(val);
          },
          filterNode(value, data, node) {
            if (!value) return true;
            return data.type == "user" && data.name.indexOf(value) !== -1;
          },
          getTreeNodeClass(item) {
            if (this.userListSelected.find((user) => user.userId == item.userId)) {
              return "is-selected";
            }
            if (this.design.userList.find((user) => user.userId == item.userId)) {
              return "is-selected";
            }
          },
          addUser(item) {
            // console.debug(item, this.userListSelected);
            if (this.userListSelected.find((user) => user.userId == item.userId)) {
              return this.$msg("用户已经添加", "error");
            }
            if (this.design.userList.find((user) => user.userId == item.userId)) {
              return this.$msg("用户已在部门中", "error");
            }
            this.userListSelected.push({ ...item, name: item.userName });
          },
          removeUser(item) {
            let index = this.userListSelected.findIndex((user) => user.userId == item.userId);
            console.debug("removeUser", index, this.userListSelected);
            index >= 0 && this.userListSelected.splice(index, 1);
          },
          getIcon(type) {
            let map = { 公司: "Jiedian-Cjdw", 部门: "Bumen", 项目: "Xiangmu", 1: "Jiedian-Cjdw", 2: "Bumen", 3: "Xiangmu" };
            return map[type];
          },
          // nodeclick(data, node) {
          //   // console.debug(data, node);
          //   if (data) {
          //     this.nodeActive = null;
          //     this.$nextTick(() => {
          //       this.nodeActive = data;
          //       data.type != "1" && data.type != "公司" && this.getChildrenUsers(data);
          //     });
          //   }
          // },
          isIndeterminate() {},
          handleCheckAllChange() {},
          cancel() {
            this.$emit(`close`);
          },
          // getChildrenUsers(dep) {
          //   this.loading = true;
          //   return this.$g.ajax.$api("sq_org.GetOrgNodesAndUsers", { companyId: window.companyId, depId: dep.id || "" }).then((result) => {
          //     this.loading = false;
          //     console.log("[getChildrenUsers]", this.result);
          //     return result;
          //   });
          // },
          getOrgNodesAndUsers() {
            window.o = this;
            this.loading = true;
            return this.$g.ajax.$api("sq_org.GetOrgNodesAndUsers", { companyId: window.companyId, depId: "" }).then((result) => {
              this.loading = false;
              this.result = result;
              this.$nextTick(() => {
                let nodeData = ((result || {}).data || [])[0] || {};
                this.nodeActive = this.$refs.tree.getNode(nodeData.vid);
                console.log("[sq_org.GetOrgNodesAndUsers]", nodeData, this.nodeActive);
              });
              return result;
            });
          },
          save() {
            // this.loading = true;
            this.cancel();
          }
        }
      };
    </script>
    <style>
      .is-selected {
        filter: grayscale(1);
        opacity: 0.6;
        pointer-events: none;
      }
      .card {
        overflow: auto;
      }
      .user-list-box {
        flex-grow: 1;
        overflow: auto;
        padding-left: 5px;
      }
      .user-list {
        overflow: auto;
      }
      .user-list-item {
        padding: 10px 5px;
      }

      .user-list-item-head {
        background-color: var(--el-color-primary);
        border-radius: 50px;
        height: 40px;
        width: 40px;
        display: inline-flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 0.8em;
        margin-right: 5px;
      }
      .el-tree-node__content {
        height: unset;
        min-height: 26px;
      }
      .el-tree-node__content .user-list-item-head {
        margin: 3px;
        margin-left: -15px;
      }
      .user-list-item-name {
        flex-grow: 1;
      }
      .worker-add-view .el-tree {
        --el-fill-color-blank: transparent;
      }
      .user-list-box .el-tree {
        overflow: auto;
        min-height: 50px;
        padding-right: 5px;
      }
      .qr {
        background: #ffffff;
        border-radius: 8px 8px 8px 8px;
        padding: 20px;
        margin: 20px 0;
      }
      .qr .qr-code {
        width: 160px;
        height: 160px;
        margin-bottom: 10px;
      }
      .qr .text {
        padding: 5px;
      }
      .text-large {
        font-size: 1.4em;
      }
      .worker-add-view {
        overflow: auto;
      }
      .worker-add-view .el-tree {
      }
      .worker-add-view .width-50 {
        height: 55vh;
        width: 49%;
      }

      .worker-add-view .el-card {
        background-color: rgb(246, 246, 246);
        padding: 10px;
        flex-grow: 1;
      }
      .dialog-action {
        margin-top: 20px;
      }
    </style>

    <!-- 人员管理组件 -->
    <template id="MemberAdd">
      <div class="member-add flex-column" v-loading="loading">
        <!-- {{userList}} -->
        <el-form ref="form" :model="form" :rules="rules" :label-width="100">
          <el-form-item label="部门成员" prop="user" class="worker">
            <!-- <Icon icon="plus" class="worker-add click" @click="setDesign({})"></Icon> -->
            <el-select
              class="width-100"
              v-model="userListId"
              multiple
              clearable
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="9"
              placeholder="添加员工"
              :disabled="true"
              @click="!design.userListSelf && setDesign({})"
            >
              <el-option v-for="item in userList" :key="item.userId" :label="item.name" :value="item.userId" />
            </el-select>
          </el-form-item>

          <template v-if="active.type=='2'">
            <el-form-item label="设立主管" prop="isZhuGuan">
              <el-radio-group v-model="form.isZhuGuan" class="">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="管理权限" prop="isAdmin">
              <el-radio-group v-model="form.isAdmin" class="">
                <el-radio :label="true">可分配</el-radio>
                <el-radio :label="false">不可分配</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="读写权限" prop="priRight">
              <el-radio-group v-model="form.priRight" class="">
                <el-radio label="write">可编辑</el-radio>
                <el-radio label="read">可查看</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="员工职位" prop="position">
              <el-input v-model.trim="form.position" class="" placeholder="输入员工职位"></el-input>
            </el-form-item>
          </template>
          <template v-if="active.type=='3'">
            <el-form-item label="主   管" prop="isZhuGuan">
              <el-radio-group v-model="form.isZhuGuan" class="">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="管理权限" prop="isAdmin">
              <el-radio-group v-model="form.isAdmin" class="">
                <el-radio :label="true">可分配</el-radio>
                <el-radio :label="false">不可分配</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="读写权限" prop="priRight">
              <el-radio-group v-model="form.priRight" class="">
                <el-radio label="write">可编辑</el-radio>
                <el-radio label="read">可查看</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="岗位" prop="jobId">
              <el-select
                class="width-100"
                v-model="form.jobId"
                clearable
                collapse-tags
                placeholder="选择岗位"
                @visible-change="visibleChange"
              >
                <el-option v-for="item in jobIdList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </template>
          <div class="form-action text-center">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="save">确认</el-button>
          </div>
        </el-form>
        <el-dialog
          width="860px"
          title="人员管理"
          :close-on-press-escape="false"
          :close-on-click-modal="false"
          :model-value="designWorker ? true : false"
          @close="setDesign()"
        >
          <Design-Worker v-if="designWorker" :design="design" :active="active" @close="setDesign()"></Design-Worker>
        </el-dialog>
      </div>
    </template>
    <script>
      var MemberAdd = {
        extends: BaseComponent,
        template: "#MemberAdd",
        components: { DesignWorker },
        name: "MemberAdd",
        props: ["design", "active"],
        emits: ["close"],
        data() {
          return {
            loading: false,
            result: null,
            form: this.design || {},
            designWorker: null,
            loading: false,
            form: {
              priRight: "read",
              ...this.design
            },
            groups: [
              {
                name: "数字员工",
                children: [
                  { name: "数字状态", children: [] },
                  { name: "工作记录", children: [] }
                ]
              }
            ],
            rules: {
              isAdmin: [
                {
                  required: true,
                  message: "请选择"
                }
              ],
              isZhuGuan: [
                {
                  required: true,
                  message: "请选择"
                  // validator(rule, value, callback) {
                  //   callback();
                  // }
                }
              ],
              priRight: [
                {
                  required: true,
                  message: "请选择"
                }
              ],
              jobId: [
                {
                  required: true,
                  message: "请选择"
                }
              ],
              position: [
                {
                  required: true,
                  message: "输入源职位"
                }
              ]
            }
          };
        },
        computed: {
          userList() {
            return (this.design || {}).userListSelf || (this.design || {}).userListAdd;
          },
          userListId() {
            return (this.userList || []).map((item) => item.userId);
          },
          jobIdList() {
            return (this.result || {}).data;
          }
        },
        created() {
          this.visibleChange(true);
        },
        methods: {
          visibleChange(val) {
            if (!val) {
              return;
            }
            this.result = null;
            let param = { wbt_id: 1 };
            this.loading = true;
            this.$g.ajax.$api("sq_org.GetAllJob", param).then((result) => {
              console.debug("[visibleChange]", result, param);
              this.loading = false;
              this.result = result;
              result.status != "success" && this.$g.toast(result.msg, "error");
            });
          },
          setDesign(design) {
            this.designWorker = design;
          },
          isIndeterminate() {},
          handleCheckAllChange() {},
          cancel() {
            this.$emit(`close`);
          },

          save() {
            this.$refs.form.validate((valid) => {
              if (valid) {
                let param = { ...this.form };
                let key = null;
                switch (this.active.type) {
                  case "2":
                    key = this.design.userListSelf ? "sq_org.UpdateOneDepartmentUser" : "sq_org.InsertDepartmentUser";
                    param.depId = this.design.dep_id || this.design.id;
                    break;
                  case "3":
                    key = this.design.userListSelf ? "sq_org.UpdateOneProjectUser" : "sq_org.InsertProjectUser";
                    param.dep_id = this.active.dep_id;
                    param.pro_id = this.active.pro_id;
                    param.job_id = param.jobId;
                    break;
                }
                if (this.design.userListSelf) {
                  //个人信息编辑
                } else {
                  //人员添加
                  param.userIds = this.userListId;
                }
                if (!key) {
                  return this.$g.toast("没有可调用接口", "error");
                }
                this.loading = true;
                this.$g.ajax.$api(key, param).then((result) => {
                  console.debug("[save]", result, param);
                  this.loading = false;
                  this.$g.toast(result.msg, result.status == "success" ? "success" : "error");
                  result.status == "success" && this.$emit(`close`, "reFresh");
                });
              } else {
                // this.$g.toast(result.msg, result.status == "success" ? "success" : "error");
                return false;
              }
            });
          }
        }
      };
    </script>
    <style>
      .member-add {
        border-radius: 8px 8px 8px 8px;
        position: absolute;
        inset: 0;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background: white;
        z-index: 9;
        padding: 20px 0;
        overflow: auto;
        margin: 10px;
      }
      .member-add .el-form {
        max-width: 900px;
      }
      .card-permission {
        width: 100%;
      }
      .card-permission .el-card {
        background-color: rgb(246, 246, 246);
        width: 49%;
        padding: 10px;
      }
      .el-form-item__content {
        position: relative;
      }
      .worker-add {
        position: absolute;
        z-index: 100;
        left: 5px;
      }
      .worker .el-select-v2__wrapper {
        padding-left: 10px;
      }
    </style>
    <!-- 管理页面 -->
    <template id="DepartmentManage">
      <div class="department-manage flex-column app-page" v-loading="loading">
        <div class="page-body flex-row-between">
          <div class="function-custom flex-column">
            <div class="title flex-row-between flex-row-center">
              公司-组织架构图
              <el-space>
                <el-button type="primary" @click="setActiveAdd({},'2')">部门添加</el-button>
                <el-button type="primary" color="#3159FC" @click="setActiveAdd({},'3')">监理机构添加</el-button>
              </el-space>
            </div>
            <Graph
              class="graph-view"
              :data="graphData"
              :config="{
                nodeHeight: 80,
                nodeWidth: 180,
                marginX: 60
              }"
            >
              <template #node="{ node, data }">
                <div
                  class="node-card flex-column"
                  :id="'node' + node.id"
                  :class="{
                    department: data.type == '3',
                    comany: data.type == '1',
                    'node-active': data == active ,
                    'click': true,
                  }"
                  @click="setActive(data)"
                  :draggable="true"
                  @dragover.prevent=""
                  @dragstart="dragStart($event, data)"
                  @drop="drop($event,data)"
                >
                  <div class="node-card-header flex-row-between flex-row-center">
                    <el-space>
                      <Icon :icon="getIcon(data.type)"></Icon>
                      <div class="text-nowrap" style="max-width: 100px" :title="data.name">{{ data.name }}</div>
                    </el-space>
                    <Icon icon="close" class="click" @click.stop="deleteDepartment(data)" v-if="data.pid"></Icon>
                  </div>
                  <div class="node-card-body flex-column">
                    <div class="flex-row-between flex-row-center" style="flex-grow: 1">
                      <div v-if="(data.userList && data.userList.length)|| data.usersStr" class="text-nowrap">
                        {{data.userList.join(' , ')||data.usersStr||""}}
                      </div>
                      <span v-else class="gray text-nowrap" style="max-width: 100px">{{"员工添加" }}</span>
                      <Icon :icon=" 'ArrowRight'" class="gray"></Icon>
                    </div>
                  </div>
                  <div
                    class="node-card-expand"
                    v-if="node.children && node.children.length || data.childCount"
                    @click.stop="data.fold=!data.fold"
                  >
                    <Icon :icon="data.childCount && !node.children?'plus':'SemiSelect'" :size="10"></Icon>
                  </div>
                </div>
              </template>
            </Graph>
          </div>
          <div v-if="activeDesign&&activeDesign.type!='1'" class="struct-item-preview" :class="expand ? '' : 'view-hide'">
            <div class="view-trigger flex-column-center click" @click="expand = !expand">
              {{ expand ? "收起" : "展开" }}
              <Icon icon="Zhankai-Ssuo" class="click"></Icon>
            </div>
            <div class="abs view-detail">
              <div v-if="activeDesign.type=='2'" class="title flex-row-between flex-row-center">部门信息</div>
              <div v-if="activeDesign.type=='3'" class="title flex-row-between flex-row-center">项目信息</div>
              <div class="view">
                <template v-if="activeDesign.type=='2'">
                  <div class="title flex-row-between flex-row-center">
                    <el-space>
                      <span>部门名称</span>
                      <el-input v-model="activeDesign.name" placeholder="请输入"></el-input>
                      <!-- <el-select model-value="1">
                        <el-option value="1" label="部门1"></el-option>
                      </el-select> -->
                      <el-button type="primary" @click="save()" plain="">保存</el-button>
                    </el-space>
                  </div>
                </template>

                <template v-if="activeDesign.type=='3'">
                  <div class="title">
                    <el-space>
                      <span>项目名称</span>
                      <el-input style="width: 200px" v-model="activeDesign.name" placeholder="请输入"></el-input>
                      <el-button type="primary" @click="save()" plain="">保存</el-button>
                    </el-space>
                    <div style="height: 10px"></div>
                    <el-space>
                      <span>业务类型</span>
                      <el-select
                        style="width: 200px"
                        v-model="activeDesign.wbt_id"
                        clearable
                        placeholder="选择业务类型"
                        @visible-change="visibleChange"
                      >
                        <el-option v-for="item in businessType" :key="item.wbt_id" :label="item.wbt_name" :value="item.wbt_id" />
                      </el-select>
                    </el-space>
                  </div>
                </template>
                <div class="title flex-row-between flex-row-center">
                  <span>员工列表</span>
                  <el-space>
                    <el-button type="primary" @click="setMemberDesign(departmentInfo)" round="" :disabled="!departmentInfo">
                      <el-space :size="2">
                        <Icon icon="plus" class="click"></Icon>
                        员工添加
                      </el-space>
                    </el-button>
                  </el-space>
                </div>
                <el-table :data="tableData" border="" stripe="">
                  <el-table-column type="index" label="#" width="50px" :resizable="false" align="center"></el-table-column>
                  <el-table-column prop="name" label="员工姓名" align="center"></el-table-column>

                  <template v-if="activeDesign.type=='2'">
                    <el-table-column prop="" label="设立主管" align="center">
                      <template #default="scoped">{{scoped.row.isZhuGuan?"设立":"不设立"}}</template>
                    </el-table-column>
                    <el-table-column prop="position" label="职位" align="center"></el-table-column>
                    <el-table-column prop="priRight" label="读写权限" align="center">
                      <template #default="scoped">{{scoped.row.priRight=='write'?"可编辑":"可查看"}}</template>
                    </el-table-column>
                    <el-table-column prop="isAdmin" label="管理权限" align="center">
                      <template #default="scoped">{{scoped.row.isAdmin?"可分配":"不可分配"}}</template>
                    </el-table-column>
                  </template>

                  <template v-if="activeDesign.type=='3'">
                    <el-table-column prop="" label="主管" align="center">
                      <template #default="scoped">{{scoped.row.isZhuGuan?"是":"否"}}</template>
                    </el-table-column>
                    <el-table-column prop="job" label="岗位" align="center"></el-table-column>
                    <el-table-column prop="priRight" label="读写权限" align="center">
                      <template #default="scoped">{{scoped.row.priRight=='write'?"可编辑":"可查看"}}</template>
                    </el-table-column>
                    <el-table-column prop="isAdmin" label="管理权限" align="center">
                      <template #default="scoped">{{scoped.row.isAdmin?"可分配":"不可分配"}}</template>
                    </el-table-column>
                  </template>

                  <el-table-column prop="" label="操作" width="140px" align="center" :resizable="false" fixed="right">
                    <template #default="scoped">
                      <el-button type="primary" plain size="small" @click="getUserInfo(scoped.row)">编辑</el-button>
                      <el-button type="danger" plain size="small" @click="removeUser(scoped.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
        <Member-Add
          v-if="memberDesign"
          :design="memberDesign"
          :active="active"
          @close="(refresh)=>{setMemberDesign();GetOrgNodes(true);refresh&&getDepartmentInfo();}"
        ></Member-Add>
      </div>
    </template>
    <script>
      window.companyId = new URLSearchParams(location.search).get("companyId"); //公司id
      window.depId = new URLSearchParams(location.search).get("depId"); //部门id

      if (!window.companyId && !window.depId) {
        ElementPlus.ElNotification({ title: "错误信息", message: "没有公司id或部门id", type: "error" });
      }
      var DepartmentManage = {
        template: "#DepartmentManage",
        extends: BaseComponent,
        name: "DepartmentManage",
        components: { MemberAdd },
        data() {
          return {
            loading: false,
            expand: true,
            memberDesign: null,
            active: null,
            activeAdd: null,
            departmentInfo: null,
            result: null,
            props: {
              value: "value",
              label: "name",
              children: "children"
            },
            resultBusinessType: null
          };
        },
        computed: {
          activeDesign() {
            return this.activeAdd || (this.active || {}).$data;
          },
          tableData() {
            return (this.departmentInfo || {}).userList;
          },
          graphData() {
            let nodeMap = {};
            let data = (this.result || {}).data || [];
            let time = Date.now();
            let childrenHide = {};
            data.map((item) => {
              let t = Date.now();
              if (item.fold) {
                childrenHide[item.id] = item;
                item.childCount = 0;
              }
              nodeMap[item.id] = item;
            });

            // console.log("[节点过滤]cache耗时", Date.now() - time, "节点数", data.length, (time = Date.now()));
            let n = 0;
            function nodesHide(hides, map) {
              let t = Date.now();
              hides = hides || {};
              let hidesNext = {};
              for (const i in map) {
                let item = map[i];
                if (!item) {
                  continue;
                }
                let parent = hides[item.pid];
                if (parent) {
                  delete nodeMap[item.id];
                  hidesNext[item.id] = item;
                  parent.childCount = (parent.childCount || 0) + 1;
                }
              }
              let childCount = Object.keys(hidesNext).length;
              // console.log(`[节点过滤]递归${n++}耗时`, hidesNext, childCount, Date.now() - t, (t = Date.now()));
              childCount && nodesHide(hidesNext, map);
            }
            nodesHide(childrenHide, nodeMap);
            // console.log("[节点过滤耗时]", Date.now() - time, childrenHide, nodeMap);
            return nodeMap;
          },
          data() {
            return [
              {
                name: "数字员工",
                value: "数字员工",
                children: [{ name: "数字状态", value: "数字状态" }]
              },
              {
                name: "项目管控",
                value: "项目管控",
                children: [{ name: "项目信息", value: "项目信息" }]
              }
            ];
          },
          businessType() {
            return (this.resultBusinessType || {}).data;
          }
        },
        watch: {
          active: {
            handler(fresh, old) {
              if (fresh) {
                // fresh.wbt_id = (this.departmentInfo || {}).wbt_id;
                this.getDepartmentInfo();
              }
            },
            immediate: true
          },
          departmentInfo: {
            handler(fresh, old) {
              this.activeDesign && (this.activeDesign.wbt_id = (fresh || {}).wbt_id);
            },
            immediate: true
          }
        },
        created() {
          this.GetOrgNodes();
          this.visibleChange(true);
        },

        methods: {
          visibleChange(val) {
            if (!val) {
              return;
            }
            this.resultBusinessType = null;
            this.loading = true;
            this.$g.ajax.$api("sq_org.GetBusinessType", {}).then((result) => {
              console.debug("[GetBusinessType]", result);
              this.loading = false;
              this.resultBusinessType = result;
              result.status != "success" && this.$g.toast(result.msg, "error");
            });
          },
          getIcon(type) {
            let map = { 公司: "Jiedian-Cjdw", 部门: "Bumen", 项目: "Xiangmu", 1: "Jiedian-Cjdw", 2: "Bumen", 3: "Xiangmu" };
            return map[type];
          },
          dragStart(ev, data) {
            ev.dataTransfer.setData("designDrag", JSON.stringify(data));
          },
          drop(ev, dropData) {
            console.debug("[拖拽]", ev, dropData);
            try {
              let str = ev.dataTransfer.getData("designDrag");
              let dragData = JSON.parse(str);
              console.log("[drop][dropData]", dragData, dropData);

              let activeDesign = this.activeDesign;
              if (!dragData || !dragData.$data || !dropData || !dropData.$data) {
                return;
              }
              // if (!dragData || !dropData) {
              //   return this.$g.toast("没有可保存对象", "error");
              // }

              let $data = dragData.$data;
              let $dataDrop = dropData.$data;
              let param = { type: $data.type, id: $data.id, sc_id: $dataDrop.sc_id, dep_id: $dataDrop.dep_id };
              console.log("[drop]", param, dropData);

              let key = null;

              switch (param.type) {
                case "1": //公司
                  key = "sq_org.UpdateCompany";
                  break;
                case "2": //部门
                  key = "sq_org.UpdateDepartment";
                  param.depId = $dataDrop.id;
                  param.depName = $data.name;
                  break;
                case "3": //项目
                  key = "sq_org.UpdateProject";
                  break;
              }
              if (!key) {
                return this.$g.toast("没有可调用接口", "error");
              }
              // this.loading = true;
              // this.$g.ajax.$api(key, param).then((result) => {
              //   this.loading = false;
              //   console.log(`[${key}]`, result, param);
              //   this.$g.toast(result.msg, result.status == "success" ? "success" : "error");

              //   if (result.status == "success") {
              //     this.GetOrgNodes();
              //     if (!param.id) {
              //       //添加模式
              //       this.activeAdd = null;
              //       this.$nextTick(() => {
              //         this.active = { $data: { id: result.data[0] } };
              //       });
              //     }
              //   }
              // });
            } catch (error) {
              console.error("[ondrop][解析ev.dataTransfer异常]", error);
            }
          },
          getUserInfo(item) {
            let param = { id: item.id };
            console.log("[getUserInfo]", param, item);
            let key = null;
            switch ((this.activeDesign || {}).type) {
              case "1": //公司
                key = "sq_org.GetOneCompanyUser";
                break;
              case "2": //部门
                key = "sq_org.GetOneDepartmentUser";
                break;
              case "3": //项目
                key = "sq_org.GetOneProjectUser";
                break;
            }
            if (!key) {
              return this.$g.toast("没有可调用接口", "error");
            }
            this.loading = true;
            this.$g.ajax.$api(key, param).then((result) => {
              this.loading = false;
              console.debug(`[${key}]`, result, param);
              result.status != "success" && this.$g.toast(result.msg, "error");
              if (result.data) {
                result.data.jobId = result.data.job_id;
                result.data.userListSelf = [{ ...result.data }];
              }
              this.setMemberDesign(result.data);
            });
          },
          setActive(active) {
            this.active = null;
            this.activeAdd = null;
            this.$nextTick(() => {
              this.active = active;
            });
          },
          setActiveAdd(data, type) {
            if (!this.active) {
              return this.$g.toast("选择需要添加子节点的目标节点", "error");
            }

            let active = this.active;
            let child = ((this.result || {}).data || []).find((item) => item.pid == active.id);
            console.debug("[setActiveAdd]", active, child);
            let $data = active.$data || {};
            if (type == "2") {
              if (active.type == "3") {
                return this.$g.toast("部门只允许添加在部门或公司下", "error");
              }
              if (child && child.type == "3") {
                return this.$g.toast("当前部门下已有项目存在,不允许添加新部门", "error");
              }
            }
            if (type == "3") {
              if (active.type != "2") {
                return this.$g.toast("项目只允许添加在部门下面", "error");
              }
              if (child && child.type == "2") {
                return this.$g.toast("当前部门下已有子部门存在,不允许添加新项目", "error");
              }
            }

            this.activeAdd = {
              ...data,
              type,
              dep_parentId: $data.type == "2" ? $data.id : "",
              sc_id: $data.type == "1" ? $data.id : "null"
            };
            data && (this.expand = true);
            this.departmentInfo = null;
          },
          setMemberDesign(memberDesign) {
            this.memberDesign = memberDesign ? JSON.parse(JSON.stringify(memberDesign)) : memberDesign;
          },
          setDesign(design) {
            this.design = design;
          },

          GetOrgNodes(onlyRefrsh) {
            this.loading = true;
            return this.$g.ajax
              .$api("sq_org.GetOrgNodes", { companyId: !window.depId ? window.companyId : "", depId: window.depId ? window.depId : "" })
              .then((result) => {
                this.loading = false;
                this.result = result;

                !onlyRefrsh &&
                  this.$nextTick(() => {
                    let active = this.active;
                    if (active) {
                      let activeNew = this.$g.lodash.find(this.graphData, function (o) {
                        return (o.$data || {}).id === (active.$data || {}).id;
                      });
                      // console.log("====", activeNew, active, this.graphData);
                      this.active = activeNew;
                    }
                  });
                return result;
              });
          },
          save() {
            let activeDesign = this.activeDesign;
            if (!activeDesign) {
              return this.$g.toast("没有可保存对象", "error");
            }

            let $data = (this.active || {}).$data || {};

            let param = { depId: $data.id, type: activeDesign.type, id: activeDesign.id };
            console.log("[save]", param, $data, activeDesign, this.departmentInfo);
            if (!activeDesign.name) {
              return this.$g.toast("输入名称", "error");
            }
            let key = null;
            switch (param.type) {
              case "1": //公司
                key = param.id ? "sq_org.UpdateCompany" : "sq_org.InsertCompany";
                break;
              case "2": //部门
                param.dep_name = activeDesign.name;
                param.depName = activeDesign.name;
                param.sc_id = activeDesign.sc_id;
                param.dep_parentId = activeDesign.dep_parentId;
                key = param.id ? "sq_org.UpdateDepartment" : "sq_org.InsertDepartment";
                break;
              case "3": //项目
                param.name = activeDesign.name; //新增
                param.pro_name = activeDesign.name; //更新
                param.wbt_id = activeDesign.wbt_id;
                param.pro_Id = param.id;
                param.depId = activeDesign.dep_id || $data.dep_id;
                param.sc_id = activeDesign.sc_id;
                key = param.id ? "sq_org.UpdateProject" : "sq_org.InsertProject";
                if (!param.wbt_id) {
                  return this.$g.toast("选择业务类型", "error");
                }
                break;
            }
            if (!key) {
              return this.$g.toast("没有可调用接口", "error");
            }
            this.loading = true;
            this.$g.ajax.$api(key, param).then((result) => {
              this.loading = false;
              console.log(`[${key}]`, result, param);
              this.$g.toast(result.msg, result.status == "success" ? "success" : "error");

              if (result.status == "success") {
                this.GetOrgNodes();
                if (!param.id) {
                  //添加模式
                  this.activeAdd = null;
                  this.$nextTick(() => {
                    this.active = { $data: { id: result.data[0] } };
                  });
                }
              }
            });
          },
          deleteDepartment(item) {
            if (!item || !item.$data) {
              return console.error("没有可删除数据");
            }
            this.$confirm("是否删除当前项？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                console.debug(`[deleteDepartment]`, item);
                let $data = item.$data;
                let param = null;
                let key = null;
                switch (item.type) {
                  case "2":
                    key = "sq_org.DeleteDepartment";
                    param = { depId: $data.id, id: $data.id };
                    break;
                  case "3":
                    key = "sq_org.DeleteProject";
                    param = { depId: $data.dep_id, pro_id: $data.id, id: $data.id };
                    break;
                }
                if (!key) {
                  return this.$g.toast("没有可调用接口", "error");
                }
                this.loading = true;
                this.$g.ajax.$api(key, param).then((result) => {
                  this.loading = false;
                  this.$g.toast(result.msg, result.status == "success" ? "success" : "error");
                  result.status == "success" && this.GetOrgNodes();
                  console.debug(`[${key}]`, result);
                });
              })
              .catch(() => {});
          },
          getDepartmentInfo() {
            let active = this.active || {};
            let $data = active.$data;
            console.debug("[getDepartmentInfo]", active);
            if (!$data || !active.id || active.type == "1") {
              return (this.departmentInfo = null);
            }
            let param = null;
            let key = null;
            switch (active.type) {
              case "2":
                key = "sq_org.GetDepartmentInfo";
                param = { depId: $data.id };
                break;
              case "3":
                key = "sq_org.GetProjectInfo";
                param = { depId: $data.dep_id, pro_id: $data.id, id: $data.id };
                break;
            }
            if (!key) {
              return this.$g.toast("没有可调用接口", "error");
            }
            this.departmentInfo = null;
            this.loading = true;
            this.$g.ajax.$api(key, param).then((result) => {
              this.loading = false;
              console.debug(`[${key}]`, result);
              this.departmentInfo = result.data;
              result.status != "success" && this.$g.toast(result.msg, "error");

              return result;
            });
          },
          updateOneDepartmentUser() {
            this.loading = true;
            this.$g.ajax.$api("sq_org.UpdateOneDepartmentUser", this.designDepartmentUser).then((result) => {
              this.loading = false;
              this.$g.toast(result.msg, result.status == "success" ? "success" : "error");
              if (result.status == "success") {
                this.getDepartmentInfo();
                this.GetOrgNodes(true);
              }
              console.log(result);
            });
          },
          removeUser(item) {
            if (!item) {
              return console.error("没有可删除数据");
            }
            let active = this.active;
            this.$confirm("是否删除当前项？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                console.debug(`[removeUser]`, item, active);

                let param = null;
                let key = null;
                switch (active.type) {
                  case "2":
                    key = "sq_org.DeleteOneDepartmentUser";
                    param = item;
                    break;
                  case "3":
                    key = "sq_org.DeleteOneProjectUser";
                    param = item;
                    // param = { depId: $data.id, pro_id: $data.id };
                    break;
                }
                if (!key) {
                  return this.$g.toast("没有可调用接口", "error");
                }
                this.loading = true;
                this.$g.ajax.$api(key, item).then((result) => {
                  this.loading = false;
                  console.debug(`[${key}]`, result);
                  this.$g.toast(result.msg, result.status == "success" ? "success" : "error");
                  if (result.status == "success") {
                    this.getDepartmentInfo();
                    this.GetOrgNodes();
                  }
                });
              })
              .catch(() => {});
          }
        }
      };
    </script>
    <style>
      .comany .node-card-header {
        background-color: #ed4014;
      }
      .department-manage {
        position: relative;
        overflow: visible;
        flex-grow: 1;
      }
      .title {
        padding: 10px;
        min-height: 56px;
        border-bottom: 1px solid #2f517e1f;
      }
      .view {
        padding: 10px;
      }
      .graph-view {
        overflow: auto;
        flex-grow: 1;
      }
      .function-custom {
        overflow: auto;
        flex-grow: 1;
        border: 1px solid #2f517e1f;
        border-top: none;
        border-bottom: none;
      }
      .node-card {
        position: absolute;
        inset: 0;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        --r: 8px;
        right: var(--r);
        overflow: visible;
      }
      .node-card-header {
        height: 34px;
        background-color: var(--el-color-primary);
        color: white;
        padding: 5px 10px;
        border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
        box-sizing: border-box;
      }
      .team .node-card-header,
      .department .node-card-header {
        background-color: var(--color-primary-light);
      }
      .node-card-body {
        flex-grow: 1;
        padding: 5px 10px;
        border-radius: 0 0 var(--el-border-radius-base) var(--el-border-radius-base);
        background-color: white;
        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
      }
      .node-card-expand {
        font-size: 0.5rem;
        position: absolute;
        top: 50%;
        right: calc(var(--r) * -2 - 1px);
        margin-top: calc(var(--r) * -1);
        border-radius: 14px;
        height: calc(var(--r) * 2);
        width: calc(var(--r) * 2);
        /* background-color: aqua; */
        z-index: -1;
        border-radius: 100%;
        border: 1px solid #2a6dac;
        color: #2a6dac;
        background-color: white;
        font-size: 12px;
        transform: scale(0.9);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .struct-item-preview {
        width: 50%;
        min-width: 800px;
        position: relative;
        /* box-shadow: 0 0 20px #ddd; */
      }
    </style>

    <!-- 接口配置 -->
    <script>
      window.$g.ajax.apiDoc.sq_org = {
        GetBusinessType: {
          name: "接口32，得到业务类型的集合",
          url: "api/sq_org/GetBusinessType",
          method: "get",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        GetAllJob: {
          name: "接口35，得到岗位列表",
          url: "api/sq_org/GetAllJob",
          method: "get",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        GetOrgNodes: {
          name: "获得组织结构",
          url: "api/sq_org/GetOrgNodes",
          method: "get",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = ((res.data || [])[0] || []).map((item) => {
              item.$data = { ...item };
              item.dep_name = item.name;
              item.id = item.vid;
              item.pid = item.parentVid != 0 ? item.parentVid : null;
              // item.userList = ["张三", "张三", "张三"];
              return item;
            });
            return res;
          }
        },
        GetOrgNodesAndUsers: {
          name: "获得组织结构和人员",
          url: "api/sq_org/GetOrgNodesAndUsers",
          method: "get",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            let data = (res.data || [])[0] || [];
            let arr = data[0] || [];
            let cache = {};
            arr.map((item) => {
              let temp = { $data: item, ...item };
              cache[item.vid] = temp;
              return temp;
            });
            arr.map((item) => {
              if (item.parentVid && cache[item.parentVid]) {
                cache[item.parentVid].children = cache[item.parentVid].children || [];
                cache[item.vid] && cache[item.parentVid].children.push(cache[item.vid]);
              }
            });
            for (const i in cache) {
              let item = cache[i];
              let userList = (item.userList || []).map((user) => {
                user.type = "user";
                user.name = user.userName;
                user.id = user.userId;
                return user;
              });
              item.children = [...(item.children || []), ...userList];
            }
            let children = Object.values(cache).filter((item) => !item.parentVid || item.parentVid == "0");
            res.data = children;

            return res;
          }
        },

        InsertDepartment: {
          name: "添加部门的名称门",
          url: "api/sq_org/InsertDepartment",
          method: "POST",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = res.data || [];
            return res;
          }
        },
        UpdateDepartment: {
          name: "接口24，更新部门名称",
          url: "api/sq_org/UpdateDepartment",
          method: "POST",
          params: { depId: "", depName: "" },
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        DeleteDepartment: {
          name: "接口41，删除部门节点",
          url: "api/sq_org/DeleteDepartment",
          method: "POST",
          params: { id: 1 },
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        InsertDepartmentUser: {
          name: "接口22，添加部门用户",
          url: "api/sq_org/InsertDepartmentUser",
          method: "post",
          params: { userIds: [], depId: 1, isZhuGuan: true, isAdmin: true, right: "read或write" },
          packagingRequest: function (param) {
            let userIds = param.userIds;
            console.error(param);
            delete param.userIds;
            delete param.userList;
            return { params: param, data: userIds, url: this.url, method: this.method };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        GetDepartmentInfo: {
          name: "接口23，得到部门的相关信息（包括部门对象和人员集合）",
          url: "api/sq_org/GetDepartmentInfo",
          method: "get",
          params: { depId: 1 },
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            let data = (res.data || [])[0] || [];
            data[0] && (data[0].userList = data[1]);
            res.data = data[0];
            return res;
          }
        },
        GetOneDepartmentUser: {
          name: "接口25，获得部门中一个用户的信息",
          url: "api/sq_org/GetOneDepartmentUser",
          method: "get",
          params: { id: 1 },
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        UpdateOneDepartmentUser: {
          name: "接口26，更新一个部门用户的信息",
          url: "api/sq_org/UpdateOneDepartmentUser",
          method: "POST",
          params: {
            id: 0,
            depId: 0,
            userId: 0,
            position: "string",
            isZhuGuan: true,
            isAdmin: true,
            priRight: "string",
            name: "string"
          },
          packagingRequest: function (param) {
            return {
              data: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        DeleteOneDepartmentUser: {
          name: "接口27，删除一个部门用户",
          url: "api/sq_org/DeleteOneDepartmentUser",
          method: "POST",
          params: { id: 1 },
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },

        InsertProject: {
          name: "添加项目的名称",
          url: "api/sq_org/InsertProject",
          method: "POST",
          packagingRequest: function (param) {
            return { params: { ...param, id: param.depId }, url: this.url, method: this.method };
          },
          packagingResponse(res) {
            res.data = res.data || [];
            return res;
          }
        },
        UpdateProject: {
          name: "接口24，更新项目名称",
          url: "api/sq_org/UpdateProject",
          method: "POST",
          params: { depId: "", depName: "" },
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        DeleteProject: {
          name: "接口41，删除项目节点",
          url: "api/sq_org/DeleteProject",
          method: "POST",
          params: { id: 1 },
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        InsertProjectUser: {
          name: "接口22，添加项目用户",
          url: "api/sq_org/InsertProjectUser",
          method: "post",
          params: {},
          packagingRequest: function (param) {
            let userIds = param.userIds;
            delete param.userIds;
            return {
              params: {
                // pro_id: param.pro_id,
                depId: param.pro_id,
                // wbt_id: param.wbt_id,
                isAdmin: param.isAdmin,
                isZhuGuan: param.isZhuGuan,
                priRight: param.priRight,
                jobId: param.jobId
              },
              data: userIds,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        GetProjectInfo: {
          name: "接口23，得到项目的相关信息（包括项目对象和人员集合）",
          url: "api/sq_org/GetProjectInfo",
          method: "get",
          params: { depId: 1 },
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            let data = (res.data || [])[0] || [];
            data[0] && (data[0].userList = data[1]);
            res.data = data[0];
            return res;
          }
        },
        GetOneProjectUser: {
          name: "接口38，获得项目中一个用户的信息",
          url: "api/sq_org/GetOneProjectUser",
          method: "get",
          params: { id: 1 },
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        UpdateOneProjectUser: {
          name: "接口26，更新一个项目用户的信息",
          url: "api/sq_org/UpdateOneProjectUser",
          method: "POST",
          params: {
            id: 0,
            depId: 0,
            userId: 0,
            position: "string",
            isZhuGuan: true,
            isAdmin: true,
            priRight: "string",
            name: "string"
          },
          packagingRequest: function (param) {
            return {
              data: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        DeleteOneProjectUser: {
          name: "接口27，删除一个项目用户",
          url: "api/sq_org/DeleteOneProjectUser",
          method: "POST",
          params: { id: 1 },
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        }
      };
    </script>
    <!-- 页面渲染入口 -->
    <link rel="stylesheet" href="./lib/app.css" />
    <div id="app" class="abs app flex-column"></div>
    <template id="dom-app">
      <Department-Manage></Department-Manage>
    </template>
    <script>
      window.$message = ElementPlus.ElMessage;
      var App = {
        extends: BaseComponent,
        template: "#dom-app",
        components: { DepartmentManage }
      };
      var app = Vue.createApp(Application, { app: App }); //渲染入口
      app.use(ElementPlus, { locale: ElementPlusLocaleZhCn }); //ui库
      app.use(Application); //公共组件库
      window.$app = app;
      window.app = app.mount("#app");
    </script>
  </body>
</html>
